{%load static%}
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>online test</title>
		<link href="{%static 'bai/bootstrap-3.3.7-dist/css/bootstrap.min.css'%}" rel="stylesheet">
	</head>

	<body style="background: #2AABD2;">
		<div class="container">
			<!--页面标题部分-->
			<div class="row">
				<div class="jumbotron" style="background: #FFFFFF;opacity: 0.3;color: #000000;">
					<h1 class="text-center text-muted" style="font-family: '微软雅黑'"><span class="glyphicon glyphicon-globe"></span>&ensp;python+人工智能&ensp;<span class="glyphicon glyphicon-globe"></span><br/>1802C班2018年度7月水平测验</h1>
					<h2>你好{{姓名}}{{权限}}<h2>
				</div>
			</div>
			<!--/页面标题结束-->
			<!--提示部分-->
			<div class="row" style="margin-bottom: 10px;">
				<div class="col" style="text-align: center;">
					<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  				考生须知(开始作答之前请点击这里)
						</button>
				</div>
			</div>
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">考生须知</h4>
						</div>
						<div class="modal-body">
							<h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;1.本次考试共有五种题型，分别是:单选题(10道,每题1分),多选题(10道,每题2分),填空题(10道,每题2分),判断题(10道,每题1分),简答题(6道,每题5分)</h3>
							<h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;2.考试时间共计90分钟，开考30分钟之后方可交卷。</h3>
							<h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;3.考生如果在考试过程中被发现有舞弊行为，成绩清零。</h3>
							<h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;4.页面底部交卷按钮点击之后不可撤销，成绩直接上传，请不要误点。</h3>
							<h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;5.如果因为没有阅读考生须知而出导致考试出现问题，概不负责。</h3>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
						</div>
					</div>
				</div>
			</div>
			<!--/提示部分-->
		 <form method = 'post' action = '{%url "paper:exam_yunsuan"%}'>
		 {%csrf_token%}
			{%if 单选题%}
			<!--这里放置单选题面板-->
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">单选题(单题分值:{{单选题.1}})</h3>
				</div>
				{%for question in 单选题.2%}
				<div class="panel-body">
					<h3>{{forloop.counter}}、{{question.question_text}}</h3>
					{%for choice in question.choice_set.all%}
					<div class="radio">
						<label>
    					<input type="radio" name="{{question.id}}" id="optionsRadios1" value="{{choice.id}}">
    					{%cycle 'A' 'B' 'C' 'D' 'E'%}、{{choice.choice_text}}
  					</label>
					</div>
					{%endfor%}
					{%resetcycle%}
				</div>
				{%endfor%}
			</div>
			<!--/单选题面板结束-->
			{%endif%}
			{%if 多选题%}
			<!--多选题面板-->
			<div class="panel panel-success">
				<div class="panel-heading">
					<h3 class="panel-title">多选题(单题分值:2)</h3>
				</div>
				<div class="panel-body">
					<h3>这里放置题干，直接更改文字即可</h3>
					<div class="checkbox">
						<label>
    					<input type="checkbox" value="">
    					A.这里放置选项文字，直接更改即可。
  					</label>
					</div>
					<div class="checkbox">
						<label>
    					<input type="checkbox" value="">
    					B.这里放置选项文字，直接更改即可。
  					</label>
					</div>
					<div class="checkbox">
						<label>
    					<input type="checkbox" value="">
    					C.这里放置选项文字，直接更改即可。
  					</label>
					</div>
					<div class="checkbox">
						<label>
    					<input type="checkbox" value="">
    					D.这里放置选项文字，直接更改即可。
  					</label>
					</div>
				</div>
			</div>
			<!--/多选题面板结束-->
			{%endif%}
			{%if 填空题%}
			<!--填空题面板部分-->
			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">填空题(单题分值:{{填空题.1}})</h3>
				</div>
				
				<div class="panel-body table-responsive">
					<table class="table table-hover">
						<tr>
							<th>题干</th>
							<th>答题</th>
						</tr>
						{%for question in 填空题.2%}
						<tr>
							<td>{{question.question_text}}</td>
							<td>
								<div class="input-group">
									<input type="text" class="form-control" name = "{{question.id}}">
									
								</div>
							</td>
						</tr>
						{%endfor%}
						
					</table>
				</div>
			</div>
			<!--/填空题面板结束-->
			{%endif%}
			{%if 判断题%}
			<!--判断题面板开始-->
			<div class="panel panel-warning">
				<div class="panel-heading">
					<h3 class="panel-title">判断题(单题分值:{{判断题.1}})</h3>
				</div>
				<div class="panel-body">
				{%for question in 判断题.2%}
					<div class="row">
						<div class="col-sm-8">
							<p>{{question.question_text}}</p>
						</div>
						<div class="col-sm-4">
							<label class="radio-inline">
  <input type="radio" id="inlineCheckbox1" value="对" name = "{{question.id}}"><span class="glyphicon glyphicon-ok"></span>
						</label>
							<label class="radio-inline">
  <input type="radio" id="inlineCheckbox1" value="错" name = "{{question.id}}"><span class="glyphicon glyphicon-remove"></span>
						</label>
						</div>
					</div>
				{%endfor%}
					
				</div>
			</div>
			<!--/判断题面板结束-->
			{%endif%}
			{%if 简答题%}
			<!--简答题面板-->
			<div class="panel panel-danger">
				<div class="panel-heading">
					<h3 class="panel-title">简答题(单题分值:{{简答题.1}})</h3>
				</div>
				{%for question in 简答题.2%}
				<div class="panel-body">
					<div class="row">
						<div class="col-sm-10 col-sm-offset-1">
							<h3>{{question.question_text}}</h3>
						</div>
						<div class="col-sm-10 col-sm-offset-1">
							<textarea class="form-control" rows="3" placeholder="请作答......" name ="{{question.id}}"></textarea>
						</div>
					</div>
				</div>
				{%endfor%}
			</div>
			<!--/简答题面板结束-->
			{%endif%}
			<div class="row" style="margin-top:10px;">
				<div class="col-sm-6 col-sm-offset-3">
					<button type="submit" class="btn btn-danger btn-lg btn-block" style="outline: none;">确认全部完成？点击提交答案。</button>
				</div>
			</div>
		 </form>
		</div>
		<script src="{%static 'bai/js/jquery-3.3.1.min.js'%}"></script>
		<script src="{%static 'bai/bootstrap-3.3.7-dist/js/bootstrap.min.js'%}"></script>
	</body>

</html>